import React from 'react';
import ECharts from 'echarts-for-react';
import styles from './index.less';
import useTooltipCarousel from './hooks/useTooltipCarousel';
import useOptions from './hooks/useOptions';

const MAX_DATE_COUNT = 14;
const AWAIT_TIME = 2000;
export default function DoubleBarChart({ title, background }) {
  const { onEvents, handleReady } = useTooltipCarousel(MAX_DATE_COUNT, AWAIT_TIME);
  const options = useOptions();

  return (
    <div className={styles['chart-container']} style={{ background }}>
      {title && <header>{title}</header>}
      <ECharts
        option={options}
        style={{ height: '400px' }}
        onChartReady={handleReady}
        onEvents={onEvents}
      />
    </div>
  );
}
